$(function () {

    commTemplUtil.initPage();
    commTemplUtil.initCommLeftMemu();

    // 选择主营品牌;
    $("#brand-btn").on("click",
        function () {
        if (typeof PAGE_DATA.modalBrandData == 'undefined') {
            $.ajax({
                url : PAGE_CONFIG.requestUrl.asbrandUrl,
                type : 'get',
                dataType : 'json',
                success : function (result) {
                    PAGE_DATA.modalBrandData = $.extend([], result.data);
                    CreateModalBrand(PAGE_DATA.modalBrandData).showModal();
                },
                error : function (xhr, status, error) {
                    CreateModalBrand([]).showModal();
                }
            });
        } else {
            CreateModalBrand(PAGE_DATA.modalBrandData).showModal();
        }
    });

    // 表单验证.
    $("#supplier_center").validate({
        rules : {
            name : "required",
            chose_banner : "required",
            chose_shop_banner : "required",
            county_id : "required",
            sell_status : "required",
            original_price : {
                required : true,
                number : true,
            },
            stock : {
                required : true,
                digits : true,
            },
            minimum_order : {
                required : true,
                digits : true,
            },
            cn : {
                required : true
            },
            weight : {
                required : true,
                number : true,
            },
            display : "required",
            recommend_status : "required",
            gender : "required",
        },
        messages : {
            shop_name : "必填项",
            display : "必选项",
            chose_shop_banner : "请选择一个商品品牌",
            shop_namew : "请选择一个小的的类别",
            adress : "请选择一个地区",
            number : "请输入一个整数",
            company : "请输入您的单位名称"
        },
        errorPlacement : function (error, element) {
            if (element.attr("name") == "signflag") {
                element.parents(".electronic-bottom").append(error);
            } else {
                element.parents(".add-right-r").after($("<div class='key-lbl <lh32></lh32>' style='width:auto;'/>").append(error));
            }
        },

    });
    var addrTemplObj = _.template($('#addr-option-templ').html());
    renderPage();

    function renderPage() {
        // 省
        $.ajax({
            url : PAGE_CONFIG.requestUrl.addrProvince,
            type : 'get',
            dataType : 'json',
            success : function (result) {
                var datas = $.extend([], result.data);
                var tmplObjHtml = addrTemplObj(datas);
                $("#province_id").html(tmplObjHtml);

                if (!!PAGE_DATA.addrDefault) {

                    setDefaulAddr("province_id", PAGE_DATA.addrDefault.province_id || "");
                }

            },
            error : function (xhr, status, error) {
                var tmplObjHtml = addrTemplObj([]);
                $("#province_id").html(tmplObjHtml);
            }
        });
        
        $("#province_id").on("change",
            function () {
            var code = $(this).val();
            renderAddrCity(code);
        });

        $("#city_id").on("change", function () {
            var code = $(this).val();
            renderAddrCounty(code);
        });
    };

    function renderAddrCity(provinceCode) {

        // 市
        $.ajax({
            url : PAGE_CONFIG.requestUrl.addrCity,
            type : 'post',
            dataType : 'json',
            data : {
                code : provinceCode,
                _token : COMM_DATA.csrfToken
            },
            success : function (result) {
                var datas = $.extend([], result.data);
                var tmplObjHtml = addrTemplObj(datas);
                $("#city_id").html(tmplObjHtml);

                if (!!PAGE_DATA.addrDefault) {
                    setDefaulAddr("city_id", PAGE_DATA.addrDefault.city_id || "");
                }

            },
            error : function (xhr, status, error) {
                var tmplObjHtml = addrTemplObj([]);
                $("#city_id").html(tmplObjHtml);
            }
        });

        $("#city_id").empty().html(addrTemplObj([]));
        $("#county_id").empty().html(addrTemplObj([]));
    };

    function renderAddrCounty(cityCode) {
        // 区/县
        $.ajax({
            url : PAGE_CONFIG.requestUrl.addrCounty,
            type : 'post',
            dataType : 'json',
            data : {
                code : cityCode,
                _token : COMM_DATA.csrfToken
            },
            success : function (result) {
                var datas = $.extend([], result.data);
                var tmplObjHtml = addrTemplObj(datas);
                $("#county_id").html(tmplObjHtml);

                if (!!PAGE_DATA.addrDefault) {
                    setDefaulAddr("county_id", PAGE_DATA.addrDefault.county_id || "");
                }
            },
            error : function (xhr, status, error) {
                var tmplObjHtml = addrTemplObj([]);
                $("#county_id").html(tmplObjHtml);
            }
        });
    };

    var classifyTemplObj = _.template($('#classify-templ').html());

    function setDefaulAddr(domId, value) {
        $("#" + domId).val(value).trigger("change");

    };

    // 零时预览图片,
    $("#regist-elec-docs").find("[type='file']").each(function () {
        $(this).AjaxFileUpload({
            action : PAGE_CONFIG.requestUrl.uploadimg,
            name : PAGE_CONFIG.requestUrl.preViewImg,
            onComplete : function (filename, response) {
                $(this).parent().find("img").attr("src", response.data);
            }
        });
    });

    // 开启规格-按钮
    $("#open_spec1").click(function () {
        getSpecData();
    });

    // 打开规格-按钮
    $("#reopen_spec").click(function () {
        renderEditSpec(PAGE_DATA.spec_data);
    });

});

function getSpecData() {

    // 缓存规格数据
    PAGE_DATA.spec_data = null;
    PAGE_DATA.spec_old_data = null;

    // 获取已存在的 规格记录ID;
    var specIds = $.extend([], PAGE_DATA.specIds);

    // 读取 规格信息.
    $.ajax({
        url : PAGE_CONFIG.requestUrl.goodsSpecS17Read,
        type : "get",
        dataType : 'json',
        data : {
            specids : specIds,
        },
        success : function (result) {
            PAGE_DATA.spec_old_data = $.extend({}, result.data);
            renderEditSpec(result.data);
        },
        error : function (xhr, status, error) {}
    });
};

function renderEditSpec(data) {

    // 编辑商品规格-弹出框模板
    var editSpecTempl = _.template($('#edit-spec-templ').html());

    if ($("[id='content:open_spec2_dialog']").length > 0) {
        // 点击删除时，重新渲染 规格数据;

        var dialogObj = $("[id='content:open_spec2_dialog']");
        var dataContain = $("#add_spec_1");

        bindSpecList(data, dialogObj, dataContain);
        return false;
    }

    var dial = dialog({
            width : 720,
            id : "open_spec2_dialog",
            title : "编辑商品规格",
            content : editSpecTempl,
            onshow : function () {

                var that = this;
                var dialogObj = $("[id='content:open_spec2_dialog']");
                var dataContain = $("#add_spec_1");

                //  单条规格记录模板
                var goodSpecTempl = _.template($('#good-spec-templ').html());
                var emptyGoodSpec = goodSpecTempl([{
                                id : "",
                                spec_1 : "",
                                spec_2 : "",
                                spec_3 : "",
                                spec_4 : "",
                                spec_5 : "",
                                price : "",
                                stock : "",
                                articleNum : ""
                            }
                        ]);

                bindSpecList(data, dialogObj, dataContain);

                //添加新的规格,只绑定一次
                $("#add_spec").click(function () {

                    if (dataContain.children().length <= 3) {
                        dataContain.append(emptyGoodSpec);
                        bindNewSpec(dataContain.find(".disnone").last());
                    } else {
                        $(this).append("<span style='color:red;' >！！每种商品最多只能有[四种]规格!!</span>");
                    }

                });

                // 保存规格
                $("#sel-keep-btn").click(function () {

                    // 保存数据到 缓存, TODO,
                    PAGE_DATA.spec_data = {
                        specName : [],
                        specData : []
                    };

                    $("#spec-title").find("input").each(function () {
                        PAGE_DATA.spec_data.specName.push($(this).val());
                    });

                    dataContain.find("ul").each(function () {
                        var dataItem = {};
                        var inputObjs = $(this).find("input");

                        dataItem.id = inputObjs.eq(0).val();
                        dataItem.spec_1 = inputObjs.eq(1).val();
                        dataItem.spec_2 = inputObjs.eq(2).val();
                        dataItem.spec_3 = inputObjs.eq(3).val();
                        dataItem.spec_4 = inputObjs.eq(4).val();
                        dataItem.spec_5 = inputObjs.eq(5).val();
                        dataItem.price = inputObjs.eq(6).val();
                        dataItem.stock = inputObjs.eq(7).val();
                        dataItem.articleNum = inputObjs.eq(8).val();

                        PAGE_DATA.spec_data.specData.push(dataItem);
                    });

                    var flag = _.isEqual(PAGE_DATA.spec_data, PAGE_DATA.spec_old_data);

                    if (!flag) {
                        // 如果数据有变动,
                        $("#open_spec1").hide();
                        $("#reopen_spec").show();
                        // 复制 标签 以备 表单提交;
                        $("#specs-form").html($("#spec-title").clone().attr("id", "")).append(dataContain.clone().attr("id", ""));
                    }

                    that.remove();
                });

            }
        });
    dial.showModal();
};

/**
 * 给 弹出框规格 绑定事件。
 */
function bindSpecList(data, dialogObj, dataContain) {

    //  单条规格记录模板
    var goodSpecTempl = _.template($('#good-spec-templ').html());

    // 打开"编辑商品规格"时，渲染 数据库已有的 规格数据.
    if (!!data.specData) {
        dataContain.html(goodSpecTempl(data.specData));
    }

    //  渲染 规格名
    if (!!data.specName && data.specName.length > 0) {
        var nameAry = data.specName;
        dialogObj.find("#spec-title").find("input").each(function (i) {
            $(this).val(nameAry[i]);
        });
    }

    dialogObj.parent().attr("style", "padding:0px");

    // 上移
    dialogObj.find("i.icon-arrow-up").on("click", function () {
        var ulObj = $(this).parents(".disnone");
        var preUlObj = ulObj.prev();
        if (preUlObj.length > 0) {
            ulObj.after(preUlObj)
        }
    });

    // 下移
    dialogObj.find("i.icon-arrow-down").on("click", function () {
        var ulObj = $(this).parents(".disnone");
        var nextUlObj = ulObj.next();
        if (nextUlObj.length > 0) {
            nextUlObj.after(ulObj)
        }
    });

    // 删除, icon-remove
    dialogObj.find("i.icon-remove").on("click", function () {
        var ulObj = $(this).parents(".disnone");
        var specId = ulObj.find("input[data-type='spec-id']").val();

        if (!!specId) {
            delteSpec(specId);
        } else {
            ulObj.remove();
        }

    });

};

/**
 * 添加新的规格属性时，绑定 上移,下移,删除;
 */
function bindNewSpec(ulObj) {
    // 上移
    ulObj.find("i.icon-arrow-up").on("click", function () {
        var ulObj = $(this).parents(".disnone");
        var preUlObj = ulObj.prev();
        if (preUlObj.length > 0) {
            ulObj.after(preUlObj)
        }
    });
    // 下移
    ulObj.find("i.icon-arrow-down").on("click", function () {
        var ulObj = $(this).parents(".disnone");
        var nextUlObj = ulObj.next();
        if (nextUlObj.length > 0) {
            nextUlObj.after(ulObj)
        }
    });
    // 删除, icon-remove
    ulObj.find("i.icon-remove").on("click", function () {
        var ulObj = $(this).parents(".disnone");
        var specId = ulObj.find("input[data-type='spec-id']").val();

        if (!!specId) {
            delteSpec(specId);
        } else {
            ulObj.remove();
        }

    });
};

/*
 * 删除"编辑商品规格"
 */
function delteSpec(specId) {

    // 读取 规格信息.
    $.ajax({
        url : PAGE_CONFIG.requestUrl.goodsSpecS17Del,
        type : "delete",
        dataType : 'json',
        data : {
            specid : specId,
            _token : COMM_DATA.csrfToken
        },
        success : function (result) {
            renderEditSpec(result.data);
        },
        error : function (xhr, status, error) {}
    });
};

/*
 * 主营品牌
 */
function CreateModalBrand(data) {
    var tmplObj = _.template($('#item-template').html());
    var tmplObjHtml = tmplObj(data);

    // 模态框, 选择主营类别
    var dial = dialog({
            id : "dialog-brand",
            width : 550,
            height : 400,
            title : "选择品牌",
            content : tmplObjHtml,
            onshow : function () {

                var that = this;
                // bind event
                var dialogObj = $("[id='content:dialog-brand']");
                dialogObj.find(".info-item").on("click",
                    function () {
                    var id = $(this).attr("id");
                    var start = id.lastIndexOf("-");
                    var idx = id.substr(start + 1);
                    $(this).addClass("hover").siblings().removeClass("hover");
                    $("#info-detail-box-" + idx).show().siblings().hide();
                });
                $("#modal-save-btn").bind("click",
                    function () {
                    var radiObj = $("[id='checked_radio']").find(":checked");
                    var getsrc = radiObj.attr("imgsrc");
                    var getId = radiObj.attr("code");
                    if (getsrc) {
                        var htmlSrc = "<img src=" + getsrc + ">";
                        $("#choose_banner").show();
                        $("#chose_banner").attr("value", getId);
                        $("#imgsrc").html(htmlSrc);
                        that.close();
                    } else {
                        alert("请选择一个商品品牌");
                    };

                });

                // 初始化 显示设定;
                $("#info-item-title-0").addClass("hover");
                $("#info-detail-box-0").show();
            }

        });

    return dial;
};